<div class="devui-demo-container" dAnchorBox dAnchorHashSupport [view]="{ top: 180, bottom: 0 }">
  <d-demo-nav [navItems]="navItems"></d-demo-nav>
  <div class="devui-demo-example" [dAnchor]="'standard-dialog'">
    <div class="devui-demo-title">{{ 'components.modal.basicDemo.title' | translate }}</div>
    <div class="devui-demo-text">{{ 'components.modal.basicDemo.description' | translate }}</div>
    <d-codebox id="basic" [sourceData]="basicSource">
      <d-basic demo></d-basic>
    </d-codebox>
  </div>
  <div class="devui-demo-example" [dAnchor]="'maximize-dialog'">
    <div class="devui-demo-title">{{ 'components.modal.maximizeDemo.title' | translate }}</div>
    <div class="devui-demo-text">{{ 'components.modal.maximizeDemo.description' | translate }}</div>
    <d-codebox id="basic" [sourceData]="maximizeSource">
      <d-maximize demo></d-maximize>
    </d-codebox>
  </div>
  <div class="devui-demo-example" [dAnchor]="'intercept-dialog-closed'">
    <div class="devui-demo-title">{{ 'components.modal.hideDemo.title' | translate }}</div>
    <div class="devui-demo-text">{{ 'components.modal.hideDemo.description' | translate }}</div>
    <d-codebox id="hide" [sourceData]="hideSource">
      <d-hide demo></d-hide>
    </d-codebox>
  </div>
  <div class="devui-demo-example" [dAnchor]="'message-hint'">
    <div class="devui-demo-title">{{ 'components.modal.tipsDemo.title' | translate }}</div>
    <div class="devui-demo-text">{{ 'components.modal.tipsDemo.description' | translate }}</div>
    <d-codebox id="tips" [sourceData]="tipsSource">
      <d-tips demo></d-tips>
    </d-codebox>
  </div>
  <div class="devui-demo-example" [dAnchor]="'update-button-options'">
    <div class="devui-demo-title">{{ 'components.modal.basicUpdateDemo.title' | translate }}</div>
    <div class="devui-demo-text">{{ 'components.modal.basicUpdateDemo.description' | translate }}</div>
    <d-codebox id="autofocus" [sourceData]="basicUpdateSource">
      <d-basic-update demo></d-basic-update>
    </d-codebox>
  </div>
  <div class="devui-demo-example" [dAnchor]="'configure-button-to-get-focus-automatically'">
    <div class="devui-demo-title">{{ 'components.modal.autofocusDemo.title' | translate }}</div>
    <div class="devui-demo-text">{{ 'components.modal.autofocusDemo.description' | translate }}</div>
    <d-codebox id="autofocus" [sourceData]="autofocusSource">
      <d-autofocus demo></d-autofocus>
    </d-codebox>
  </div>
  <div class="devui-demo-example" [dAnchor]="'template-content'">
    <div class="devui-demo-title">{{ 'components.modal.templateDemo.title' | translate }}</div>
    <div class="devui-demo-text">{{ 'components.modal.templateDemo.description' | translate }}</div>
    <d-codebox id="autofocus" [sourceData]="templateSource">
      <d-template demo></d-template>
    </d-codebox>
  </div>
  <div class="devui-demo-example" [dAnchor]="'template-fixed'">
    <div class="devui-demo-title">{{ 'components.modal.templateFixedDemo.title' | translate }}</div>
    <div class="devui-demo-text">
      {{ 'components.modal.templateFixedDemo.description' | translate }}
    </div>
    <d-codebox id="autofocus" [sourceData]="fixedWrapperSource">
      <d-fixed-wrapper demo></d-fixed-wrapper>
    </d-codebox>
  </div>
  <div class="devui-demo-example" [dAnchor]="'custom-dialog'">
    <div class="devui-demo-title">{{ 'components.modal.customizeDemo.title' | translate }}</div>
    <div class="devui-demo-text">{{ 'components.modal.customizeDemo.description' | translate }}</div>
    <d-codebox id="customize" [sourceData]="customizeSource">
      <d-customize demo></d-customize>
    </d-codebox>
  </div>
  <div class="devui-demo-example" [dAnchor]="'cases'">
    <div class="devui-demo-title">{{ 'components.modal.casesDemo.title' | translate }}</div>
    <div class="devui-demo-text">
      {{ 'components.modal.casesDemo.description' | translate }}
    </div>
    <d-codebox id="cases" [sourceData]="casesSource">
      <d-cases demo></d-cases>
    </d-codebox>
  </div>
</div>
